<template>
  <div class="map-wrap">
    <div v-if="history.length > 1" class="return-btn" @click="goBack">
      返回上一级
    </div>
    <div id="echatsMap" style="width: 800px; height: 800px"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import axios from "axios";
import { cityCode } from "@/assets/data/cityCode.js";

export default {
  name: "echatsMap",
  components: {},
  data() {
    return {
      cityCode,
      myChart: "",
      distributionOptions: "",
      history: [{ adcode: 100000, name: "中国" }],
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.init();
    });
  },
  methods: {
    // 初始化地图数据
    init() {
      // 主地图的JOSN文件下载
      // ip地址访问前端项目,接口会报 403
      let path = `https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json`;
      const params = this.cityCode;
      axios.get(path).then((res) => {
        // 注册可用的地图
        echarts.registerMap("china", res.data);
        this.changeOption("china");
        this.myChart = echarts.init(document.querySelector("#echatsMap"));
        this.myChart.setOption(this.distributionOptions);
        // 点击省份子区域的时候可以切换到省份地图
        this.myChart.on("click", (chinaParam) => {
          // console.log("chinaParam", chinaParam);
          if (!this.cityCode) {
            this.cityCode = params;
            this.getProvinceMapOpt(100000, "");
            console.log("已经到区/县/县级市了");
            this.history = [{ adcode: 100000, name: "中国" }];
          } else {
            const conform = this.cityCode.find((x) =>
              chinaParam.name.includes(x.name)
            );
            console.log("conform", conform);
            if (conform) {
              this.cityCode = conform.city;
              this.getProvinceMapOpt(conform.adcode, conform.name);
              this.history.push({ adcode: conform.adcode, name: conform.name });
            } else {
              this.cityCode = params;
              this.getProvinceMapOpt(100000, "");
            }
          }
        });
      });
      // 监听window窗口变化，当窗口大小发生变化时，会触发此事件
      window.onresize = function () {
        if (this.myChart) this.myChart.resize(); // 改变图表尺寸
      };
    },
    // 下载/显示各省地图
    getProvinceMapOpt(provinceAlphabet, name) {
      // 根据地区编码获取所在地区的JSON地图
      let path = `https://geo.datav.aliyun.com/areas_v3/bound/${provinceAlphabet}_full.json`;
      if (provinceAlphabet === 10000) {
        path = "/mapJson/china.json";
      }
      axios.get(path).then((res) => {
        echarts.registerMap(name, res.data);
        this.changeOption(name);
        this.myChart.setOption(this.distributionOptions, true);
      });
    },
    // echarts 配置项
    changeOption(name) {
      // 经纬度数据
      const seriesList = [
        {
          data: [{ value: [106.9, 27.7] }, { value: [105.29, 27.32] }],
        },
      ];
      // 图标
      // const series = seriesList.map((v) => {
      //   return {
      //     type: "scatter", // 配置显示方式为用户自定义
      //     coordinateSystem: "geo", // 使用地理坐标系
      //     data: v.data,
      //     // 自定义图标的样式  支持svg与bse64
      //     symbol: function (params, key) {
      //       return "image://" + require("@/assets/logo.png");
      //     },
      //     symbolSize: 16, // 标记的大小
      //   };
      // });
      const series = [
        {
          type: "effectScatter",
          coordinateSystem: "geo", // 使用地理坐标系
          data:[{ value: [113.280637, 23.125178] }],
          // symbol: function (params, key) {
          //   return "image://" + require("@/assets/logo.png");
          // },
          symbolSize: 16, // 标记的大小
          itemStyle: {
            color: {
              type: 'radial',
              x: 0.5,
              y: 0.5,
              r: 0.5,
              colorStops: [{
                offset: 0,
                color: 'rgba(27,214,76,0.6)'
              }, {
                offset: 0.8,
                color: 'rgba(88,249,130,0.8)'
              }, {
                offset: 1,
                color: 'rgba(145,249,88,0.7)'
              }],
              global: false // 缺省为 false
            }
          },
          // label:{show:true}
        },
      ];

      // options
      this.distributionOptions = {
        tooltip: {
          // 提示框组件
          show: true, // 显示提示框组件
          trigger: "item", // 触发类型
          triggerOn: "mousemove", // 触发条件
          formatter: "名称:{b}<br/>坐标:{c}",
        },
        series, // 数据
        geo: {
          map: name || "china", // 引入地图 省份或者 国家
          layoutCenter: ["50%", "50%"], // 设置后left/right/top/bottom等属性无效
          layoutSize: "45%",
          roam: true, // 是否开启鼠标缩放和平移漫游
          zoom: 2,
          label: {
            show: true, // 是否显示地图省份得名称
            // 静态的时候展示样式
            // color: "#fff",
            // fontSize: 10, // 默认 12
            fontFamily: "Arial",
          },
          itemStyle: {
            // 地图区域的多边形 图形样式。
            borderColor: "#002097", // 边框颜色
            areaColor: "#4c60ff", //  区域颜色
          },
          // 高亮状态
          emphasis: {
            label: {
              color: "#fff",
            },
            itemStyle: {
              areaColor: "#293fff",
            },
          },
        },
      };
    },
    goBack() {
      this.history.pop();
      this.getProvinceMapOpt(
        this.history[this.history.length - 1].adcode,
        this.history[this.history.length - 1].name
      );
    },
  },
};
</script>

<style scoped>
.return-btn {
  cursor: pointer;
  /* border: 1px solid #000; */
}
</style>
<!---->